<template>
  <div class="main">
    <div class="search">
      <el-form :inline="true" :model="skuType" class="demo-form-inline form">
        <el-form-item label="商品类型搜索">
          <el-input v-model.trim="skuType.className" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <div class="button"><el-button type="primary" icon="el-icon-circle-plus-outline" @click="addTask">新建</el-button>
      </div>

      <div class="table">
        <el-table
          style="width: 100%"
          class="customer-table"
          :data="skuList"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            label="商品类型名称"
            width="970"
            prop="className"
          />

          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <span class="edit" @click="editSku(row)">修改</span>
              <span class="del" @click="delSku(row.classId)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <add-sku-type ref="skuClass" :dialog-open.sync="dialogOpen" :refresh-list="getSkuInfo" />

  </div>
</template>

<script>
import { getSkuInfo, delSkuClass } from '@/api/sku'
import AddSkuType from './components/addSkuType.vue'

export default {
  components: { AddSkuType },
  data() {
    return {
      skuType: {
        pageIndex: 1,
        pageSize: 10,
        className: ''
      },
      skuList: [],
      dialogOpen: false

    }
  },
  created() { this.getSkuInfo() },
  methods: {
    onSubmit() {
      this.skuType.pageIndex = 1
      this.getSkuInfo()
    },
    addTask() {
      this.dialogOpen = true
    },
    async  getSkuInfo() {
      const { data } = await getSkuInfo(this.skuType)
      console.log(data)
      this.skuList = data.currentPageRecords
      this.$store.commit('sku/SET_SKUCLASSNAME', data.currentPageRecords)
      // console.log(this.skuList)
    },
    editSku(row) {
      this.dialogOpen = true
      this.$refs.skuClass.skuDate = { ...row }
    },
    async delSku(id) {
      try {
        await this.$confirm('确定删除该商品类型吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delSkuClass(id)
        this.getSkuInfo()
        this.$message.success('删除商品类型成功')
      } catch (error) {
        console.log('cancel')
      }
    }

  }
}
</script>

<style lang="scss" scoped>

.search {
    height: 64px;
    // width: 100%;
    background-color: #fff;
     display: flex;
     align-items: center;
     padding-top: 20px;
     margin-bottom: 20px;
        .el-button--primary {
            background-color: #6783f7;
            border-color: #6783f7;
             display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;

        }
    .form {
        padding: 0 0 0 17px;
        .el-form-item {
    .el-form-item__label {
        font-size: 14px;
    }
  ::v-deep  label {
        font-weight: 400 !important;
    }
}
    }

     }
     .result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .button {
    display: flex;
    .el-button--primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    font-size: 14px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    // margin-right: 15px !important;
   ::v-deep .el-icon-circle-plus-outline{
      font-size: 16px !important;
    }
    }
  }
     }

      .table {
    margin-top: 20px;
      ::v-deep .el-table th, .el-table tr th td {
         background: rgb(243, 246, 251);
         border: none;
         font-size: 14px;
         color: #666;
    }
    .el-table::before {
     height: 0;
    }
   ::v-deep .el-table td {
        border-bottom:none;
    }

  }
  .edit {
    color: #5f84ff;
    font-weight: 500;

  }
  .del {
    color: #ff5a5a;
    font-weight: 500;
    display: inline-block;
    margin-left: 10px;
  }

</style>
